<template>
    <div class="all">
        <div class="head">
            <van-nav-bar title="演出预告" left-arrow @click-left="onClickLeft" />
        </div>
    <div style="width: 100%;height: 50px;"></div>

        <div class="list">
            <van-tabs v-model:active="active" shrink @click-tab="onClickTab">
                <van-tab v-for="(item, index) in classData" :title="item.name" :name="index">
                    <div class="box" v-for="(items, indexs) in classLists">
                        <div class="heads">
                            <p :class="{ time_two: checkTimeRange(items.begin, items.end) } == 3">{{ items.title }}</p>
                            <p
                                :class="{ time_one: checkTimeRange(items.begin, items.end) == 1, time_two: checkTimeRange(items.begin, items.end) == 2, time_thre: checkTimeRange(items.begin, items.end) == 3 }">
                                {{ items.begin }}~{{ items.end }}</p>
                        </div>
                        <div class="footer">
                            {{ items.content }}
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { showDialog } from 'vant';
let scenicData = JSON.parse(sessionStorage.getItem("scienceData")); //获取本地数据景区信息
console.log(scenicData);
const classData = ref([]);
const onClickLeft = () => history.back();
const active = ref(0);
const classLists = ref([]);
const onClickTab = ({ name }) => request(name);;
axios({ //请求演出分类
    url: "/api/science/show", // url
    params: {
        // 参数
        scienceid: scenicData.id
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        classData.value = res.data.data
        request(active.value)
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });

function request(index) {
    axios({ //请求演出预告列表
        url: "/api/science/show_detaile", // url
        params: {
            // 参数
            scienceid: scenicData.id,
            classid: classData.value[index].classid
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            classLists.value = res.data.data;
            console.log(classLists.value);
            for (let i = 0; i < classLists.value.length; i++) {
                if (checkTimeRange(classLists.value[i].begin, classLists.value[i].end) == 1) {
                    showDialog({
                        title: classLists.value[i].title,
                        message: classLists.value[i].content,
                    }).then(() => {
                        // on close
                    });
                }

            }
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
//判断时间
function checkTimeRange(beginTime, endTime) {
    var now = new Date();
    var begin = new Date(now.toDateString() + " " + beginTime);
    var end = new Date(now.toDateString() + " " + endTime);
    if (now >= begin && now <= end) {
        return 1
    } else if (now < begin) {
        return 3
    } else if (now > end) {
        return 2
    }
}
</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}
.all {
    width: 100%;
    height: 100vh;
    background-color: #f1f0f0;
}

.box {
    width: 90%;
    height: auto;
    margin: 10px 5%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

.heads {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 20px;
    line-height: 2;
}

.footer {
    width: 100%;
    color: #797979;
}

.name_one {
    color: black;
}

.time_one {
    color: rgb(121, 187, 79);
}

.time_two {
    color: #c3c3c3;
}

.name_two {
    color: #c3c3c3;
}

.time_thre {
    color: black;
}
</style>